<script setup>
import { bus } from '@/utils/common/mitt'
import { ref } from 'vue'

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['handleTable'])

// 按钮配置常量
const BUTTON_CONFIG = {
  ENABLED_BUTTONS: [
    'detail',
    'delete',
    'apply',
    'view',
    'process',
    'processMangement',
    'viewWeekly',
    'viewResultStep'
  ],
  STATUS_MAP: {
    material: {
      null: { text: '暂未提交', type: 'warning' },
      0: { text: '等待审核', type: 'info' },
      1: { text: '审核不通过', type: 'danger' },
      2: { text: '审核通过', type: 'success' }
    },
    internship: {
      0: { text: '未实习', type: 'warning' },
      1: { text: '正在实习', type: 'primary' },
      2: { text: '实习完毕', type: 'success' }
    }
  }
}

function handleTable(e, type) {
  emits('handleTable', e.row, type)
}

function handleSwitch(e) {
  console.log(e)
}

/**
 * 判断按钮是否需要禁用
 * @param {string} data - 按钮prop
 * @param {number|null} status - 数据状态
 * @returns {boolean} 是否禁用
 */
function isButtonDisabled(data, status) {
  console.log(data,status);
  
  // 特殊处理submitMaterial按钮
  if (data === 'submitMaterial' && status === 1) {
    return false
  }
  
  // 特殊处理noprocess和processs按钮
  if ((data == 'noprocess' || data === 'processs') && status !== 0) {
    return true
  }
  
  // 当状态为0或null时不禁用,或者按钮在enabledButtons列表中时不禁用
  return status !== 0 && status !== null && !BUTTON_CONFIG.ENABLED_BUTTONS.includes(data)
}

/**
 * 获取状态显示文本和样式
 * @param {string} type - 状态类型
 * @param {number|null} status - 状态值
 * @returns {{text: string, type: string}} 显示文本和标签类型
 */
function getStatus(type, status) {
  return BUTTON_CONFIG.STATUS_MAP[type]?.[status] || { text: '未知状态', type: 'info' }
}

/**
 * 获取按钮显示文本
 * @param {string} prop - 按钮属性
 * @returns {string} 显示文本
 */
function getButtonText(prop) {
  const textMap = {
    resume: '查看',
    materialView: '预览',
    studentMaterial: '下载',
    material: '下载'
  }
  return textMap[prop] || '预览'
}
</script>

<template>
  <div class="table-wrapper">
    <el-table
      :data="props.tableData"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <slot name="firstColumn"></slot>
      
      <el-table-column
        v-for="item in props.columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        min-width="150"
        :sortable="item.sortable"
        show-overflow-tooltip
      >
        <template #default="scope">
          <!-- 审核状态 -->
          <template v-if="item.prop === 'status' && item.slot === 'span'">
            <span
              :style="{
                fontWeight: 600,
                fontSize: '14px',
                color: getStatus('material', scope.row.status).type === 'info' 
                  ? '#1e90ff' 
                  : getStatus('material', scope.row.status).type === 'danger'
                    ? '#ff4757'
                    : '#7bed9f'
              }"
            >
              {{ getStatus('material', scope.row.status).text }}
            </span>
          </template>

          <!-- 图片预览 -->
          <img
            v-if="item.prop === 'license'"
            v-viewer
            :src="scope.row.license"
            alt="营业执照"
            class="license-image"
          />

          <!-- 操作按钮 -->
          <template v-if="item.display === 'button'">
            <el-button
              type="primary"
              plain
              @click="handleTable(scope, item.prop + (item.prop === 'material' && item.display === 'view' ? 'View' : ''))"
            >
              {{ getButtonText(item.prop) }}
            </el-button>
          </template>

          <!-- 结果反馈 -->
          <template v-if="item.prop === 'feedbackDesc'">
            <el-tag v-if="!scope.row.feedbackDesc" type="info">暂无反馈</el-tag>
            <el-button
              v-else
              type="primary"
              plain
              @click="handleTable(scope, item.prop)"
            >
              查看反馈
            </el-button>
          </template>

          <!-- 状态标签 -->
          <template v-if="item.display === 'tag'">
            <el-tag 
              v-if="item.prop === 'status'" 
              :type="getStatus('material', scope.row.status).type"
            >
              {{ getStatus('material', scope.row.status).text }}
            </el-tag>

            <el-tag
              v-if="item.prop === 'create_time'"
              :type="scope.row.create_time ? 'success' : 'warning'"
            >
              {{ scope.row.create_time || '暂未提交' }}
            </el-tag>

            <el-tag
              v-if="item.prop === 'internship'"
              :type="getStatus('internship', scope.row.internship).type"
            >
              {{ getStatus('internship', scope.row.internship).text }}
            </el-tag>
          </template>
        </template>
      </el-table-column>

      <!-- 表格相关操作 -->
      <el-table-column
        v-if="props.options.length"
        fixed="right"
        label="操作"
        :width="props.options.length === 1 ? 130 : props.options.length === 2 ? 225 : 320"
        class="table-options"
      >
        <template #default="obj">
          <el-button
            v-for="item in props.options"
            :key="item.prop"
            plain
            :type="item.type || 'primary'"
            @click="handleTable(obj, item.prop)"
            :disabled="isButtonDisabled(item.prop, obj.row.status)"
          >
            {{ item.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.table-wrapper {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  :deep() {
    .el-table {
      th {
        background-color: #f5f7fa !important;
        color: #606266;
        font-weight: 600;
        padding: 12px 0;
      }
      
      td {
        padding: 8px 0;
      }
      
      .table-options {
        .el-button {
          margin: 0 4px;
          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
      
      .el-tag {
        border-radius: 4px;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
      }
      
      .license-image {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.3s;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}
</style>
